<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form name="f1">
      <p>
        hobby
        <input type="checkbox" name="hobby" value="css" />CSS
        <input type="checkbox" name="hobby" value="html" />HTML
        <input type="checkbox" name="hobby" value="js" />JS
      </p>

      <button type="button" name="submitBtn">提交</button>
    </form>
    <script>
      const f1 = document.f1;
      f1.submitBtn.onclick = function () {
        // ①获取被选中的对象，②提取选中对象中的value值
        // const r = [...f1.hobby]
        //   .filter((el) => el.checked === true)
        //   .map((el) => el.value);
        // console.log(r);
        // 设置 ①获取被选中的对象，②遍历设置每个对象的checked，如果对象的value在预设数组中则checked选中否则checked不选
        [...f1.hobby].forEach((el) => {
          const flag = ["js", "html"].includes(el.value);
          el.checked = flag;
        });
      };
    </script>
  </body>
</html>
